<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="Button">点击</button>
    <script>
        // this
        // 1.默认绑定规则
        // 2.隐式绑定规则 谁调用 指向谁
        // 3.显示绑定 call apply bind
        // 4.new

        // 箭头函数中没有arguments
        // var sum = (a, b) => {
        //     console.log(arguments);
        //     return a + b;
        // }
        // sum(1, 2)

        //... spread/rest运算符 （展开或是收集）
        // 扩展运算符必须是最后一个参数
        // var sum = (...args) => {
        //     console.log(args);
        //     return a + b;
        // }
        // sum(1, 2) //收集

        function foo(x, y, z) {
            console.log(x, y, z);
        }
        foo(...[1, 2, 3]) //扩展

        // 箭头函数的this指向
        // 根据外层的函数作用域来决定的
        // 箭头函数不作为构造函数来使用
        // 没有arguments对象
        // yield 命令不能生效，在generator函数中

        // function foo() {
        //     console.log(this);
        //     return (a) => {
        //         console.log(this.a);
        //     }
        // }
        // var obj1 = {
        //     a: 2
        // }
        // var obj2 = {
        //     a: 3
        // }
        // var bar = foo.call(obj1);
        // bar.call(obj2) //2

        const person = {
            eat() {
                console.log(this);
            },
            drind: () => {
                console.log(this);
            }
        }
        person.eat(); //person
        person.drind(); //window
        (function() {
            function Button() {
                this.Button = document.getElementById('Button');
            }
            Button.prototype = {
                init() {
                    this.bindEvent();
                },
                bindEvent() {
                    this.Button.addEventListener('click', (e) => this.click(e))
                },
                click() {
                    console.log('点击事件');
                    console.log(this);
                }
            }
            new Button().init()
        })()
        // 在箭头函数this的指向是固化的，箭头函数内部并没有自己的this，只能通过父级作用域来获取到this，闭包的this


        var test = () => {
                console.log(arguments);
            }
            // test()
        function foo1() {
            setTimeout(() => {
                console.log(arguments);
            }, 1);
        }
        foo1(1, 2, 4, 56) //Arguments(4) [1, 2, 4, 56, callee: ƒ, Symbol(Symbol.iterator): ƒ]
            // 1.简单的函数表达式，得出唯一的return的计算值，函数内部没有this引用
            // 没有递归，事件绑定、解绑定，用重构=>的方式
            // 2. 内层函数表达式，需要调用this，例：var self=this，bind(this),确保适当的this指向的时候；
            // 3. var args=Array.prototype.slice.call(arguments);
        function sprtNumber() {
            return Array.prototype.slice.call(arguments).sort(function(a, b) {
                return a - b
            })
        }
        const sorNumber = (...numbers) => numbers.sort((a, b) => a - b)

        // 不适合箭头表达式的情况
        // 函数声明，执行语句比较多，还需要用到递归，需要引用函数名，事件绑定，解绑定，避免使用箭头函数

        //
    </script>
</body>

</html>